<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .container {
        height: 250px;
      }
      .box {
        width: 200px;
        height: 200px;
        padding: 12px;
        border: 6px solid blue;

        background-color: skyblue;

        overflow: auto;

        position: absolute;
        top: 20px;
        left: 30px;
        direction: rtl;
      }

      .box p {
        margin: 0;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box">
        <p>
          晨光熹微时，老槐树下已排开三五个白瓷碗。卖豆浆的汉子肩头搭着汗巾，铜勺在青釉缸里划出半轮月亮。穿蓝布衫的学生匆匆搁下两个铜板，碗底便漾起一圈圈乳白的涟漪。校工摇着黄铜铃铛从廊下走过，惊起几只啄食的麻雀。这市井晨曲日日上演，却总在七点三刻准时散场，仿佛被无形的钟表匠上了发条。生活原是素笺上晕开的墨点，在规矩里洇出几分生动。
        </p>
      </div>
    </div>
    <script>
      const div = document.getElementsByClassName("box")[0];

      function createParagra(text) {
        const p = document.createElement("p");
        p.textContent = `div ${text}`;
        document.body.append(p);
      }

      createParagra(`offsetTop 的值等于 div 的定位 top ${div.offsetTop}`);
      createParagra(`offsetLeft 的值等于 div 的定位 left ${div.offsetLeft}`);
      createParagra(
        `offsetWidth 的值等于 div 的 边框(6*2) + padding(12*2) + contentWidth(200-16) + 竖向滚动条（16,若存在） ${div.offsetWidth}`
      );
      createParagra(
        `offsetHeight 的值等于 div 的 边框(6*2) + padding(12*2) + contentHeight(200-16) + 横向滚动条（16,若存在） ${div.offsetHeight}`
      );
      createParagra(
        `clientWidth 的值等于 padding(12*2) + contentHeight(200-16)  ${div.clientWidth}`
      );
      createParagra(
        `clientHeight 的值等于 padding(12*2) + contentHeight(200) ${div.clientHeight}`
      );
      createParagra(
        `scrollTop 的值等于元素内容距离顶部边缘滚动的像素点  ${div.scrollTop}`
      );

      createParagra(
        `scrollHeight 的值等于 所有文本的所占高度 ${div.scrollHeight}`
      );
      createParagra(`clientTop 的值等于 div 顶部边框 ${div.clientTop}`);
      createParagra(
        `clientLeft 的值等于 div 左边边框 + (竖向滚动条宽度：如果书写方式是从右到左) ${div.clientLeft}`
      );
    </script>
  </body>
</html>
